<template>
  <div style="min-height: 450px">
    <div style="padding: 10px 10px" class="whiteBox">
      <Tab
        :show-back="true"
        :tabs="tabColumns"
        :active-name="activeName"
        @handleTabClick="handleTabClick"
      />
    </div>
    <div v-show="activeName === '1'">
      <div class="order-detail">
        <ShipmentTableComponents ref="detailTabList1" :value="ruleFrom" />
      </div>
    </div>
    <div v-show="activeName === '3'">
      <BoxListComponent ref="detailTabList3" :value="ruleFrom.details" :styleBox="'height: calc(100vh - 210px);overflow: auto;'" />
    </div>
    <div v-show="activeName === '2'">
      <CommonFile ref="detailTabList2" :service-id="ruleFrom.id" service-type="OUT_WAREHOUSE" />
    </div>
  </div>
</template>
<script>
import Tab from "@/components/Tab/detailTab.vue";
// import TableComponent from '@/components/Table/list.vue'
import BoxListComponent from "@/views/components/wms/BoxList/index.vue";
import ShipmentTableComponents from './shipmentTableComponents.vue'
import CommonFile from '@/components/File/index.vue'
import {
  listWmsShipmentOrder,
} from '@/api/wms/shipmentOrder'
export default {
  components: { Tab, BoxListComponent, ShipmentTableComponents, CommonFile },
  props: {
    ruleFrom: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  filters: {
    statusFilter(newVal) {
      return (
        (DispatchStatusEnum.find((c) => c.value === newVal) || {}).label || "--"
      );
    },
  },
  data() {
    return {
      activeName: "1",
      columns: [
        { prop: "itemId", label: this.$t('order.itemId') },
        { prop: "productName", label: this.$t('order.productName') },
        { prop: "productQuantity", label: this.$t('common.count') },
        { prop: "productPrice", label: this.$t('common.price') },
        { prop: "productTotalPrice", label: this.$t('fiance.amount') },
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        shipmentOrderStatus: 14
      },
      wmsShipmentOrderList: []
    };
  },
  computed: {
    tabColumns() {
      let base = [];
      let file = [
        {
          name: this.$t('common.files'),
          value: "2",
        },
      ];
      if (this.ruleFrom.outType === "SKU") {
        base = [
          {
           name: this.$t('common.SKUDetail'),
            value: "1",
          },
        ];
      } else if (this.ruleFrom.outType === "BOX") {
        base = [
          {
            name: this.$t('common.BoxDetails'),
            value: "1",
          },
          {
            name: this.$t('common.AbnormalBoxDetails'),
            value: "3",
          },
        ];
      }
      return [...base, ...file];
    },
  },
  methods: {
    handleTabClick(v) {
      this.activeName = v;
      const name = "detailTabList" + this.activeName;
      this.$refs[name].getList();
      if(this.activeName === '3') {
        this.getlistWmsShipmentOrder()
      }
    },
    returnData(data) {
      if (data.list) {
        return data.list;
      }
    },
    getList() {
      // this.$nextTick(()=>{
        this.$refs.detailTabList1.getList();
      // })
    },
    /** 查询出库单列表 */
    getlistWmsShipmentOrder() {
      const {pageNum, pageSize} = this.queryParams
      const query = {...this.queryParams, pageNum: undefined, pageSize: undefined, 
        shipmentOrderId: this.$route.query.id || this.ruleFrom.id,
      }
      const pageReq = {page: pageNum - 1, size: pageSize}
      listWmsShipmentOrder(query, pageReq).then(response => {
        const {content, totalElements} = response
        this.wmsShipmentOrderList = content
      })
    },
  },
};
</script>
